<template>
    <div class="loginBg d-flex justify-content-center align-items-center">
        <div class="d-flex">
            <div class="pt-5 rigthDiv">
                <div style="text-align: center;margin-bottom: 20px">
                    <img src="../assets/imgs/logo.png" alt="" class="logoImg"/>
                </div>
                <div class="d-flex justify-content-center py-4">
                    <el-input
                            placeholder="请输入账号/手机号/邮箱"
                            v-model="user.phone" class="userInput"
                            style="width: 80%">
                        <i slot="prefix" class="fa fa-user user-icon"></i>
                    </el-input>
                </div>
                <div class="d-flex justify-content-center py-2">
                    <el-input
                            placeholder="请输入密码"
                            v-model="user.password"
                            type="password"
                            class="userInput"
                            style="width: 80%"
                    >
                        <i slot="prefix" class="fa fa-unlock-alt user-icon"></i>
                    </el-input>
                </div>
                <div class="login-ing" v-loading="loading" @click="login">登&nbsp;陆</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loading: false,
                user: {
                    phone: '',
                    password: ''
                }
            }
        },
        mounted() {
            // if (localStorage.getItem('token')) {
            //     this.$router.push({path: '/'});
            // }
        },
        methods: {
             login() {
                if (!this.user.phone) {
                    this.$message({
                        message: '请输入账号',
                        type: 'error'
                    });
                } else if (!this.user.password) {
                    this.$message({
                        message: '请输入密码',
                        type: 'error'
                    });
                } else {
                    let params = {
                        mobile: this.user.phone,
                        password: this.user.password
                    };
                    this.loading = true;
                    this.$http.post('api/auth/login',params)
                    // this.$http.get('api/home/user/getCode')
                        .then((result)=>{
                            if (result.status_code == 200) {
                                localStorage.setItem("token", result.data.token);
                                localStorage.setItem("userInfo", JSON.stringify(result.data.userInfo));
                                this.$router.push({path: '/'});
                                this.$message({
                                    message:result.msg,
                                    type:'success',
                                    during:500
                                });
                            } else {
                                this.$message.warning(result.msg);
                            }
                            this.loading = false;
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                }
            }
        }
    };
</script>

<style scoped>
    .rigthDiv {
        width: 385px;
        height: 450px;
        border-radius: 6px;
        background-color: hsla(0, 0%, 100%, .3);
    }
    .loginBg {
        width: 100vw;
        height: 100vh;
        /*background: url("https://s1.ax1x.com/2018/07/05/PVIlgH.jpg");*/
        background: url("../assets/imgs/bj.jpg");
    }
    .logoImg {
        width: auto;
        height: 50px;
    }
    .title {
        font-size: 36px;
        color: rgb(204, 204, 204);
        text-shadow: rgb(204, 204, 204) -1px -1px, rgb(51, 51, 51) 1px 1px;
    }
    .user-icon {
        font-size: 28px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 50px;
        margin-left: 30px;
    }

    .login-ing {
        width: 80%;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        margin: 40px auto 0;
        border-radius: 3px;
        color: hsla(0, 0%, 100%, .8);
        background-color: rgba(0, 0, 0, .3);
        text-align: center;
        cursor: pointer;
    }
</style>
<style>
    .userInput .el-input__inner {
        background-color: rgba(0, 0, 0, .3) !important;
        padding-left: 70px !important;
        height: 50px;
        border-color: hsla(0, 0%, 100%, 0) !important;
        color: hsla(0, 0%, 100%, .5);
        font-size: 16px;
    }
</style>